<template>
  <div class="lines">
    <div id="bottom_1">

    </div>
  </div>

</template>

<script>

import mockdata1 from '@/assets/data/page1/part3-1.json'
import mockdata2 from '@/assets/data/page1/part3-2.json'


export default {
  name: '',
  data() {
    return {
      value: 2,
      xAxisData: [],
      seriesData: [],
      selected: {},
      legendData: [],
      myChart: null,
      yData1: [],
      yData2: []
    }
  },
  methods: {
    handleSelect(val) {

      // let colorList = ['#bf232a', '#feed2c', '#2c7bfe', '#feac2c', '#ff7b7e', '#2cd9fe', '#a262f2', '#2ca8fe'];

      this.xAxisData = []

      for (let item of mockdata1) {
        this.xAxisData.push(item.year)
        this.yData1.push(item.value)
      }
      for (let item of mockdata2) {
        this.yData2.push(item.value)
      }



      this.setChart()
    },
    // 金钱交易分析
    setChart() {
      let option = {
        title: [
          {
            text: '【诊疗人次数 / 万人次】',
            textStyle: {
              fontSize: 12,
              color: '#75deef',
              fontWeight: 'normal'
            },
            top: '10%',
            left: '20%'
          },
          {
            text: '【入院人次数 / 万人次】',
            textStyle: {
              fontSize: 12,
              color: '#75deef',
              fontWeight: 'normal'
            },
            top: '10%',
            right: '12%'
          },
        ],
        grid: [
          {
            show: false,
            left: '2%',
            top: '18%',
            right: '51%',
            bottom: 0,
            containLabel: true,
          },
          {
            show: false,
            left: '51%',
            top: "18%",
            bottom: 0,
            right: '2%',
            containLabel: true,

          },
        ],
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'none',

          },
          backgroundColor: '#11367a',
          formatter: (params) => {
            let seriesId = params.seriesId.substr(params.seriesId.length - 1, 1)
            if (seriesId == 0) {
              return params.name + "<br>" + "诊疗人数:" + params.value + '万人次'
            } else {
              return params.name + "<br>" + "入院人数:" + params.value + '万人次'
            }

          },
          textStyle: {
            color: '#6dd0e3',
            fontSize: 10,
          },
        },

        xAxis: [
          {
            type: 'category',
            data: this.xAxisData,
            boundaryGap: true,
            axisLabel: {
              fontSize: 9,
              color: '#75deef',
              interval: 0,
              showMaxLabel: true,
              showMinLabel: true,

            },
            axisLine: {
              lineStyle: {
                color: '#1a3c58'
              }
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: true,
              inside: true
            }
          },
          {
            gridIndex: 1,
            type: 'category',
            data: this.xAxisData,
            axisLabel: {
              fontSize: 9,
              color: '#75deef',
              interval: 0,
              showMaxLabel: true,
              showMinLabel: true,
            },
            axisLine: {

              lineStyle: {
                color: '#1a3c58'
              }
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: true,
              inside: true
            }
          },

        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: "#1a3c58",
              },
            },
            axisLabel: {
              showMaxLabel: true,
              fontSize: 9,
              color: '#75deef'
            },
            name: '万人次',
            nameGap: 10,
            nameTextStyle: {
              color: '#75deef',
              fontSize: 9,
              align: 'right',
              padding: [0, 6, 0, 0]
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#1a3c58'
              }
            },
            axisTick: {
              show: true,
              length: 3,
            }
          },

          {
            gridIndex: 1,
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: "#1a3c58",
              },
            },
            axisLabel: {
              showMaxLabel: true,
              fontSize: 9,
              color: '#75deef'
            },
            name: '万人次',
            nameGap: 10,
            nameTextStyle: {
              color: '#75deef',
              fontSize: 9,
              align: 'right',
              padding: [0, 6, 0, 0]
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#1a3c58'
              }
            },
            axisTick: {
              show: true,
              length: 3,
            }
          },
        ],
        series: [
          {
            type: 'line',
            showSymbol: true,
            data: this.yData1,
            color: '#a262f2'
          },
          {
            type: 'line',
            showSymbol: true,
            data: this.yData2,
            xAxisIndex: 1,
            yAxisIndex: 1,
            color: '#2ca8fe'
          }
        ]
      };
      if (!this.myChart) this.myChart = this.$echarts(document.getElementById('bottom_1'));
      this.myChart.clear();
      this.myChart.resize()
      this.myChart.setOption(option);
      this.myChart.on('legendselectchanged', (params) => {
        let arr = [];
        for (let i in params.selected) {
          if (params.selected[i] == true) {
            arr.push(params.selected[i])
          }
        }
        if (arr.length > 4) {
          this.$Modal.error({
            content: "<p>当前最多显示4个图例</p>"
          });
          this.myChart.dispatchAction({
            type: 'legendUnSelect',
            // 图例名称
            name: params.name
          })
        }

      });
    },
  },
  mounted() {
    this.handleSelect(this.value);

  },
}
</script>

<style lang="less" scoped>
.lines {
  height: 100%;
  width: 100%;

  #bottom_1 {
    height: 100%;
    width: 100%;
  }

  position: relative;

  .switchButton {
    position: absolute;
    z-index: 5;
    right: 10px;
    top: 15px;
    border: 1px solid #028bff;
    border-radius: 5px;
    padding: 0;

    .active {
      background: #0454a1;
    }

    a {
      display: inline-block;
      color: #fff;
      padding: 1px 8px;
    }

  }
}

</style>
